<script setup lang="jsx">
import { ref, h, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { NTabs, NTabPane, NCard, NButton, NIcon, NList, NListItem, NDivider, NAvatar, NBadge, NTooltip, NDrawer, NDrawerContent, NSpace, NInput, NSwitch } from 'naive-ui'
import { Book, Bookmark, Download, Copy, Star, ThumbsUp, ArrowBack, Layers, Refresh, Alert }
  from '@vicons/ionicons5'
import { BookOpen, Lightbulb, PlusCircle, Tag } from '@vicons/fa'
import { BrainCircuit20Regular, Lightbulb16Filled, Share20Regular } from '@vicons/fluent'
import { FileText, MessageCircle, ExternalLink } from '@vicons/tabler'
import { globalVariable } from '@/stores/index.js'
import Comment from '@/components/Comment.vue'

const router = useRouter()
const route = useRoute()
const message = useRouter().currentRoute.value.params.message || null

// 状态管理
const activeTab = ref('original')
const showNotesDrawer = ref(false)
const showRelatedDocsDrawer = ref(false)
const notesContent = ref('')
const isSaved = ref(false)
const loading = ref(false)
const docId = ref(route.params.id || '1')

// 模拟文献数据
const documentData = ref({
  id: docId.value,
  title: '基于深度学习的智能文献分析系统设计与实现',
  authors: ['张三', '李四', '王五'],
  publication: '计算机科学与技术学报',
  year: '2023',
  volume: '38',
  issue: '2',
  pages: '123-135',
  abstract: '本文提出了一种基于深度学习的智能文献分析系统，该系统能够自动提取文献关键信息、生成摘要、分析主题并进行智能推荐。实验结果表明，该系统在文献处理效率和准确性方面均优于传统方法。',
  keywords: ['深度学习', '文献分析', '智能推荐', '自然语言处理'],
  content: '\n1. 引言\n随着信息技术的飞速发展，学术文献的数量呈现爆炸式增长。据统计，每年发表的学术论文数量超过200万篇，传统的人工文献阅读和分析方法已经无法满足科研人员的需求。因此，开发高效的智能文献分析系统成为当务之急。\n\n2. 相关工作\n目前，国内外学者在智能文献分析领域已经开展了大量研究。早期的方法主要基于规则和统计模型，但这些方法在处理复杂的自然语言时存在局限性。近年来，随着深度学习技术的发展，基于神经网络的方法在文本分类、情感分析、摘要生成等任务中取得了显著进展。\n\n3. 系统设计\n本文提出的智能文献分析系统主要包括以下几个模块：\n3.1 数据采集模块\n该模块负责从各种学术数据库和期刊网站采集文献数据，包括标题、作者、摘要、关键词、全文等信息。\n\n3.2 文本预处理模块\n对采集到的文本数据进行清洗、分词、停用词去除等预处理操作，为后续的分析任务做准备。\n\n3.3 深度学习模型\n采用BERT、GPT等预训练语言模型进行文本表示学习，并在此基础上构建特定任务的模型。\n\n3.4 智能分析模块\n该模块负责文献的自动分类、主题提取、情感分析等任务。\n\n3.5 可视化展示模块\n将分析结果以直观的方式展示给用户，包括图表、词云等形式。\n\n4. 实验与结果\n4.1 数据集\n本实验使用了ACL Anthology、arXiv等数据库中的文献数据，共收集了10万篇计算机科学领域的论文。\n\n4.2 实验设置\n实验使用PyTorch框架实现深度学习模型，在NVIDIA Tesla V100 GPU上进行训练。\n\n4.3 评价指标\n采用准确率、召回率、F1值等指标对系统性能进行评估。\n\n4.4 实验结果\n实验结果表明，本文提出的系统在各项任务上均取得了优于基线方法的性能。特别是在文献分类和摘要生成任务中，F1值分别达到了0.89和0.76。\n\n5. 结论与展望\n本文提出了一种基于深度学习的智能文献分析系统，该系统能够有效地处理大量学术文献，为科研人员提供高效的文献分析工具。未来的工作将集中在进一步提高系统的准确性和实用性，拓展应用场景。'
})

// AI解读数据
const aiAnalysis = ref({
  summary: '本文提出了一种基于深度学习的智能文献分析系统，该系统通过数据采集、文本预处理、深度学习模型、智能分析和可视化展示五个模块，实现了文献的自动分类、主题提取和摘要生成等功能。实验表明，该系统在文献处理效率和准确性方面优于传统方法。',
  keyPoints: [
    '系统由数据采集、文本预处理、深度学习模型、智能分析和可视化展示五个模块组成',
    '采用BERT、GPT等预训练语言模型进行文本表示学习',
    '在10万篇计算机科学论文数据集上进行实验，取得了优于基线方法的性能',
    '文献分类和摘要生成任务的F1值分别达到了0.89和0.76'
  ],
  technicalTerms: [
    { term: '深度学习', explanation: '机器学习的一个分支，通过多层神经网络模拟人脑的学习过程，能够自动从数据中学习特征和规律' },
    { term: 'BERT', explanation: 'Bidirectional Encoder Representations from Transformers的缩写，是一种基于Transformer架构的预训练语言模型' },
    { term: '预训练语言模型', explanation: '在大规模文本语料上预先训练的语言模型，能够学习通用的语言表示，可用于多种自然语言处理任务' },
    { term: 'F1值', explanation: '精确率和召回率的调和平均值，用于评估分类模型的性能' }
  ],
  relevance: '该文献对智能文献分析系统的设计和实现具有重要参考价值，特别是在深度学习技术应用于学术文献处理方面提供了实践经验。'
})

// 相关文献数据
const relatedDocuments = ref([
  { id: '101', title: '基于Transformer的学术文献摘要生成方法研究', relevance: 95 },
  { id: '102', title: '学术文献智能分类与推荐系统的设计与实现', relevance: 89 },
  { id: '103', title: '深度学习在文本挖掘中的应用综述', relevance: 87 },
  { id: '104', title: '基于知识图谱的学术文献关联分析系统', relevance: 82 },
  { id: '105', title: '面向科研人员的智能文献管理系统设计', relevance: 80 }
])

// 模拟用户笔记
const userNotes = ref([
  { id: '1', content: '这篇文章提出的系统架构很清晰，值得参考', createTime: '2023-10-15 14:30' },
  { id: '2', content: '实验部分的数据量较大，结果比较可靠', createTime: '2023-10-15 15:45' }
])

// 方法定义
const goBack = () => {
  router.back()
}

const saveNote = () => {
  if (!notesContent.value.trim()) {
    message.warning('笔记内容不能为空')
    return
  }
  userNotes.value.unshift({
    id: Date.now().toString(),
    content: notesContent.value,
    createTime: new Date().toLocaleString('zh-CN')
  })
  notesContent.value = ''
  isSaved.value = true
  setTimeout(() => {
    isSaved.value = false
  }, 2000)
}

const deleteNote = (noteId) => {
  userNotes.value = userNotes.value.filter(note => note.id !== noteId)
}

const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text)
  message.success('已复制到剪贴板')
}

const downloadDocument = () => {
  // 实际项目中应实现真实的下载功能
  message.info('文献下载中...')
}

const shareDocument = () => {
  // 实际项目中应实现真实的分享功能
  message.info('分享链接已复制到剪贴板')
}

const loadDocumentDetail = () => {
  loading.value = true
  // 模拟API请求延迟
  setTimeout(() => {
    // 在实际项目中，这里应该调用API获取真实的文献数据
    loading.value = false
  }, 800)
}

// 组件挂载时加载数据
onMounted(() => {
  loadDocumentDetail()
})
</script>

<template>
  <div class="detail-layout">
    <!-- 左侧导航 -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <NButton 
          type="text" 
          @click="goBack" 
          class="back-button"
          size="large"
        >
          <NIcon><ArrowBack /></NIcon>
        </NButton>
        <h2 class="system-title">文献详情</h2>
      </div>
      
      <nav class="sidebar-nav">
        <NList class="nav-list">
          <NListItem 
            class="nav-item"
            :class="{ active: activeTab === 'original' }"
            @click="activeTab = 'original'"
          >
            <NIcon slot="prefix"><Book /></NIcon>
            原文浏览
          </NListItem>
          <NListItem 
            class="nav-item"
            :class="{ active: activeTab === 'aiAnalysis' }"
            @click="activeTab = 'aiAnalysis'"
          >
            <NIcon slot="prefix"><BrainCircuit20Regular /></NIcon>
            AI解读
          </NListItem>
          <NListItem 
            class="nav-item"
            @click="showRelatedDocsDrawer = true"
          >
            <NIcon slot="prefix"><Layers /></NIcon>
            相关文献
            <NBadge :value="relatedDocuments.length" class="badge" />
          </NListItem>
          <NListItem 
            class="nav-item"
            @click="showNotesDrawer = true"
          >
            <NIcon slot="prefix"><FileText /></NIcon>
            我的笔记
            <NBadge :value="userNotes.length" class="badge" />
          </NListItem>
        </NList>
      </nav>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 文献头部信息 -->
      <div class="document-header">
        <div class="title-section">
          <h1 class="document-title">{{ documentData.title }}</h1>
          <div class="document-meta">
            <span class="authors">{{ documentData.authors.join('，') }}</span>
            <span class="meta-divider">|</span>
            <span class="publication">{{ documentData.publication }}</span>
            <span class="meta-divider">|</span>
            <span class="year">{{ documentData.year }}</span>
          </div>
        </div>
        
        <div class="action-buttons">
          <NTooltip placement="bottom">
            {{ isSaved ? '已保存' : '记笔记' }}
            <template #trigger>
              <NButton 
                :type="isSaved ? 'success' : 'default'"
                :render-icon="() => isSaved ? h(ThumbsUp) : h(Bookmark)"
                @click="showNotesDrawer = true"
                class="action-button"
                size="small"
              />
            </template>
          </NTooltip>
          
          <NTooltip placement="bottom">
            下载文献
            <template #trigger>
              <NButton 
                :render-icon="() => h(Download)"
                @click="downloadDocument"
                class="action-button"
                size="small"
              />
            </template>
          </NTooltip>
          
          <NTooltip placement="bottom">
            复制链接
            <template #trigger>
              <NButton 
                :render-icon="() => h(Copy)"
                @click="copyToClipboard(window.location.href)"
                class="action-button"
                size="small"
              />
            </template>
          </NTooltip>
          
          <NTooltip placement="bottom">
            分享
            <template #trigger>
              <NButton 
                :render-icon="() => h(Share20Regular)"
                @click="shareDocument"
                class="action-button"
                size="small"
              />
            </template>
          </NTooltip>
        </div>
      </div>

      <!-- 选项卡内容 -->
      <NTabs v-model:value="activeTab" class="content-tabs">
        <!-- 原文展示 -->
        <NTabPane name="original" tab="原文浏览" class="tab-pane">
          <NCard class="content-card">
            <template #header>
              <div class="card-header">
                <NIcon><BookOpen /></NIcon>
                <span class="card-title">原文内容</span>
              </div>
            </template>
            <div class="document-content">
              <div class="abstract-section">
                <h3>摘要</h3>
                <p class="abstract-text">{{ documentData.abstract }}</p>
              </div>
              
              <div class="keywords-section">
                <h3>关键词</h3>
                <div class="keywords-list">
                  <NBadge 
                    v-for="(keyword, index) in documentData.keywords" 
                    :key="index"
                    class="keyword-badge"
                  >
                    {{ keyword }}
                  </NBadge>
                </div>
              </div>
              
              <div class="full-text-section">
                <h3>全文内容</h3>
                <div 
                  class="full-text"
                  v-html="documentData.content.replace(/\n/g, '<br>')"
                ></div>
              </div>
            </div>
          </NCard>
        </NTabPane>

        <!-- AI解读 -->
        <NTabPane name="aiAnalysis" tab="AI解读" class="tab-pane">
          <NCard class="content-card">
            <template #header>
              <div class="card-header">
                <NIcon><BrainCircuit20Regular /></NIcon>
                <span class="card-title">智能分析</span>
              </div>
            </template>
            <div class="ai-analysis-content">
              <!-- 智能摘要 -->
              <div class="analysis-section">
                <div class="section-header">
                  <NIcon><FileText /></NIcon>
                  <h3>智能摘要</h3>
                </div>
                <div class="analysis-text">
                  <NIcon class="lightbulb-icon"><Lightbulb /></NIcon>
                  <p>{{ aiAnalysis.summary }}</p>
                </div>
              </div>
              
              <!-- 关键点提取 -->
              <div class="analysis-section">
                <div class="section-header">
                  <NIcon ><Tag /></NIcon>
                  <h3>关键要点</h3>
                </div>
                <ul class="key-points-list">
                  <li v-for="(point, index) in aiAnalysis.keyPoints" :key="index">
                    <NIcon class="point-icon"><PlusCircle /></NIcon>
                    {{ point }}
                  </li>
                </ul>
              </div>
              
              <!-- 术语解释 -->
              <div class="analysis-section">
                <div class="section-header">
                  <NIcon><Book /></NIcon>
                  <h3>术语解释</h3>
                </div>
                <div class="terms-list">
                  <Comment 
                    v-for="(term, index) in aiAnalysis.technicalTerms" 
                    :key="index"
                    class="term-item"
                  >
                    <template #avatar>
                      <NAvatar round>{{ term.term.substring(0, 2) }}</NAvatar>
                    </template>
                    <template #author>{{ term.term }}</template>
                    <template #content>{{ term.explanation }}</template>
                  </Comment>
                </div>
              </div>
              
              <!-- 文献价值 -->
              <div class="analysis-section">
                <div class="section-header">
                  <NIcon><Star /></NIcon>
                  <h3>文献价值评估</h3>
                </div>
                <div class="relevance-section">
                  <NIcon><Alert /></NIcon>
                  <p>{{ aiAnalysis.relevance }}</p>
                </div>
              </div>
            </div>
          </NCard>
        </NTabPane>
      </NTabs>
    </main>

    <!-- 右侧辅助功能 -->
    <aside class="right-sidebar">
      <div class="right-sidebar-content">
        <!-- 文献信息卡片 -->
        <NCard class="info-card">
          <template #header>
            <div class="card-header">
              <NIcon><FileText /></NIcon>
              <span class="card-title">文献信息</span>
            </div>
          </template>
          <div class="doc-info">
            <div class="info-item">
              <span class="info-label">文献ID:</span>
              <span class="info-value">{{ documentData.id }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">发表年份:</span>
              <span class="info-value">{{ documentData.year }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">卷期:</span>
              <span class="info-value">{{ documentData.volume }}({{ documentData.issue }})</span>
            </div>
            <div class="info-item">
              <span class="info-label">页码:</span>
              <span class="info-value">{{ documentData.pages }}</span>
            </div>
          </div>
        </NCard>

        <!-- 快速操作 -->
        <NCard class="quick-actions-card">
          <template #header>
            <div class="card-header">
              <NIcon><Lightbulb /></NIcon>
              <span class="card-title">智能助手</span>
            </div>
          </template>
          <div class="quick-actions">
            <NButton 
              block 
              type="primary" 
              class="quick-action-button"
              @click="activeTab = 'aiAnalysis'"
            >
              <NIcon><BrainCircuit20Regular /></NIcon>
              <span>查看完整AI解读</span>
            </NButton>
            <NButton 
              block 
              class="quick-action-button"
              @click="showRelatedDocsDrawer = true"
            >
              <NIcon><Layers /></NIcon>
              <span>查找相关文献</span>
            </NButton>
            <NButton 
              block 
              class="quick-action-button"
              @click="showNotesDrawer = true"
            >
              <NIcon><MessageCircle /></NIcon>
              <span>添加笔记</span>
            </NButton>
          </div>
        </NCard>
      </div>
    </aside>

    <!-- 笔记抽屉 -->
    <NDrawer 
      v-model:show="showNotesDrawer" 
      placement="right" 
      :width="400"
      class="notes-drawer"
    >
      <NDrawerContent>
        <div class="drawer-header">
          <h3 class="drawer-title">我的笔记</h3>
        </div>
        <div class="notes-container">
          <NInput 
            v-model:value="notesContent" 
            placeholder="在此输入您的笔记..."
            type="textarea"
            class="notes-input"
            :autosize="{ minRows: 4, maxRows: 8 }"
          />
          <NButton 
            type="primary" 
            block 
            @click="saveNote"
            class="save-note-button"
          >
            保存笔记
          </NButton>
          <NDivider class="divider" />
          <div class="saved-notes">
            <h4 class="saved-notes-title">已保存的笔记</h4>
            <NList 
              v-if="userNotes.length > 0"
              class="notes-list"
            >
              <NListItem 
                v-for="note in userNotes" 
                :key="note.id"
                class="note-item"
              >
                <div class="note-content">
                  <p>{{ note.content }}</p>
                  <span class="note-time">{{ note.createTime }}</span>
                </div>
                <NButton 
                  type="text" 
                  :render-icon="() => h(Copy)"
                  @click="copyToClipboard(note.content)"
                  size="small"
                />
                <NButton 
                  type="text" 
                  danger
                  @click="deleteNote(note.id)"
                  size="small"
                >
                  删除
                </NButton>
              </NListItem>
            </NList>
            <div v-else class="empty-notes">
              <p>暂无笔记，快来添加第一条笔记吧！</p>
            </div>
          </div>
        </div>
      </NDrawerContent>
    </NDrawer>

    <!-- 相关文献抽屉 -->
    <NDrawer 
      v-model:show="showRelatedDocsDrawer" 
      placement="right" 
      :width="400"
      class="related-docs-drawer"
    >
      <NDrawerContent>
        <div class="drawer-header">
          <h3 class="drawer-title">相关文献</h3>
          <NButton 
            type="text" 
            :render-icon="() => h(Refresh)"
            @click="loadDocumentDetail"
            size="small"
          />
        </div>
        <div class="related-docs-container">
          <NList class="related-docs-list">
            <NListItem 
              v-for="doc in relatedDocuments" 
              :key="doc.id"
              class="related-doc-item"
              @click="router.push(`/lingTach/detail?id=${doc.id}`)"
            >
              <div class="related-doc-content">
                <h4 class="related-doc-title">{{ doc.title }}</h4>
                <div class="relevance-score">
                  <span class="relevance-label">相关度:</span>
                  <span class="relevance-value">{{ doc.relevance }}%</span>
                </div>
              </div>
              <NIcon><ExternalLink /></NIcon>
            </NListItem>
          </NList>
        </div>
      </NDrawerContent>
    </NDrawer>
  </div>
</template>

<style scoped lang="scss">
// 主布局样式
.detail-layout {
  display: flex;
  height: 100vh;
  background-color: #f5f7fa;
  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
}

// 左侧导航样式
.sidebar {
  width: 240px;
  background-color: #ffffff;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);

  .sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    gap: 12px;

    .back-button {
      color: #165dff;
    }

    .system-title {
      font-size: 18px;
      font-weight: 600;
      color: #165dff;
      margin: 0;
    }
  }

  .sidebar-nav {
    flex: 1;
    padding: 16px 0;

    .nav-list {
      .nav-item {
        padding: 12px 24px;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #666666;

        &:hover {
          background-color: #e8f3ff;
          color: #165dff;
        }

        &.active {
          background-color: #e8f3ff;
          color: #165dff;
          font-weight: 500;
        }

        .badge {
          background-color: #ff7d00;
        }
      }
    }
  }
}

// 主内容区域样式
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
}

// 文献头部信息样式
.document-header {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;

  .title-section {
    flex: 1;
    min-width: 0;

    .document-title {
      font-size: 24px;
      font-weight: 600;
      color: #1d2129;
      margin: 0 0 12px 0;
      line-height: 1.4;
    }

    .document-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;

      .authors {
        color: #165dff;
        font-weight: 500;
      }

      .meta-divider {
        color: #c9cdd4;
      }

      .publication,
      .year {
        color: #666666;
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;

    .action-button {
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-1px);
      }
    }
  }
}

// 选项卡样式
.content-tabs {
  flex: 1;
  overflow: hidden;

  .tab-pane {
    height: 100%;
    overflow: hidden;
  }
}

// 内容卡片样式
.content-card {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1d2129;

    .card-title {
      font-size: 16px;
    }
  }
  :deep(.n-card__content) {
    height: calc(100% - 65px);
    overflow: hidden;
  }
}

// 文献内容样式
.document-content {
  flex: 1;
  overflow-y: auto;
  height: 100%;
  padding: 20px 0;

  .abstract-section,
  .keywords-section,
  .full-text-section {
    margin-bottom: 32px;

    h3 {
      font-size: 18px;
      font-weight: 600;
      color: #1d2129;
      margin: 0 0 16px 0;
      padding-bottom: 8px;
      border-bottom: 2px solid #e8f3ff;
    }
  }

  .abstract-text {
    color: #666666;
    line-height: 1.6;
    margin: 0;
  }

  .keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .keyword-badge {
      background-color: #e8f3ff;
      color: #165dff;
      border: 1px solid #d1e6ff;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 14px;
    }
  }

  .full-text {
    color: #333333;
    line-height: 1.8;
    white-space: pre-wrap;
    word-wrap: break-word;

    br {
      margin-bottom: 12px;
    }
  }
}

// AI分析内容样式
.ai-analysis-content {
  flex: 1;
  overflow-y: auto;
  height: 100%;
  padding: 20px 0;

  .analysis-section {
    margin-bottom: 32px;

    .section-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;

      h3 {
        font-size: 16px;
        font-weight: 600;
        color: #1d2129;
        margin: 0;
      }
    }
  }

  .analysis-text {
    background-color: #e8f3ff;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;

    .lightbulb-icon {
      color: #ff7d00;
      flex-shrink: 0;
      margin-top: 2px;
    }

    p {
      margin: 0;
      color: #333333;
      line-height: 1.6;
    }
  }

  .key-points-list {
    padding-left: 12px;
    margin: 0;

    li {
      list-style: none;
      margin-bottom: 12px;
      padding-left: 24px;
      position: relative;
      line-height: 1.6;
      color: #333333;

      .point-icon {
        position: absolute;
        left: 0;
        top: 2px;
        color: #165dff;
      }
    }
  }

  .terms-list {
    .term-item {
      margin-bottom: 16px;
      padding: 12px;
      background-color: #f7f8fa;
      border-radius: 6px;

      .n-comment-author {
        color: #165dff;
        font-weight: 500;
      }

      .n-comment-content {
        color: #666666;
        line-height: 1.6;
      }
    }
  }

  .relevance-section {
    background-color: #fff7e6;
    border: 1px solid #ffe7ba;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;

    p {
      margin: 0;
      color: #664d03;
      line-height: 1.6;
    }
  }
}

// 右侧辅助功能样式
.right-sidebar {
  width: 300px;
  background-color: #ffffff;
  border-left: 1px solid #e8e8e8;
  overflow-y: auto;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
}

.right-sidebar-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

// 信息卡片样式
.info-card,
.quick-actions-card {
  .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;

    .card-title {
      font-size: 14px;
      font-weight: 600;
      color: #1d2129;
    }
  }
}

.doc-info {
  .info-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;

    .info-label {
      color: #86909c;
    }

    .info-value {
      color: #333333;
      font-weight: 500;
    }
  }
}

// 快速操作样式
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;

  .quick-action-button {
    font-size: 13px;
    height: 36px;

    &:first-child {
      background-color: #165dff;
      &:hover {
        background-color: #0958d9;
      }
    }
  }
}

// 抽屉样式
.notes-drawer,
.related-docs-drawer {
  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e8e8e8;
    
    .drawer-title {
      font-size: 18px;
      font-weight: 600;
      color: #1d2129;
      margin: 0;
    }
  }
}

.notes-container {
  padding: 24px;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  gap: 16px;

  .notes-input {
    border-color: #d1e6ff;
  }

  .save-note-button {
    background-color: #165dff;
    &:hover {
      background-color: #0958d9;
    }
  }

  .divider {
    margin: 8px 0;
  }

  .saved-notes {
    flex: 1;
    overflow-y: auto;

    .saved-notes-title {
      font-size: 14px;
      font-weight: 600;
      color: #86909c;
      margin: 0 0 12px 0;
    }

    .notes-list {
      .note-item {
        padding: 12px 0;
        
        .note-content {
          flex: 1;
          min-width: 0;
          margin-right: 8px;
        }

        .note-content p {
          margin: 0 0 4px 0;
          color: #333333;
          line-height: 1.4;
          word-wrap: break-word;
        }

        .note-time {
          font-size: 12px;
          color: #86909c;
        }
      }
    }

    .empty-notes {
      text-align: center;
      padding: 40px 0;
      color: #86909c;
    }
  }
}

.related-docs-container {
  padding: 24px;
  height: calc(100vh - 80px);
  overflow-y: auto;

  .related-docs-list {
    .related-doc-item {
      padding: 16px 0;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background-color: #f5f7fa;
      }

      .related-doc-content {
        flex: 1;
        min-width: 0;
        margin-right: 8px;
      }

      .related-doc-title {
        font-size: 14px;
        font-weight: 500;
        color: #1d2129;
        margin: 0 0 6px 0;
        line-height: 1.4;
        word-wrap: break-word;
      }

      .relevance-score {
        display: flex;
        align-items: center;
        gap: 4px;

        .relevance-label {
          font-size: 12px;
          color: #86909c;
        }

        .relevance-value {
          font-size: 12px;
          color: #ff7d00;
          font-weight: 600;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .right-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .detail-layout {
    flex-direction: column;
  }
  
  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #e8e8e8;
  }
  
  .main-content {
    padding: 12px;
  }
  
  .document-header {
    padding: 16px;
  }
  
  .document-title {
    font-size: 20px !important;
  }
}
</style>